<template>
	<view class="content">
		<!-- #ifdef MP -->
		<hx-navbar ref="hxnb" :config="{
        back: false,
        title: '首页',
        fontSize: '15px',
        backgroundColor: [1, '#fff'],
      }" />
		<!-- #endif -->
		<view class="top-bar">
			<view class="bar-left" @click="showCheckCity">
				{{ nowCity.name ? nowCity.name : "临沂市" }}
				<uni-icons type="arrowdown" size="18"></uni-icons>
			</view>
			<view class="bar-content" @click="supply('electBidding')">
				<uni-icons type="search" size="20" style="margin-left: 10rpx"></uni-icons>
				<input style="width: 100%; margin-left: 10rpx" placeholder="请输入项目名称或项目编号" />
			</view>
		</view>
		<!-- <view class="top-banner">
      <image
        src="@/static/image/banner.jpg"
        style="width: 100%; height: 100%; border-radius: 20rpx"
      />
    </view> -->
		<!-- <view class="affiche">
      <image
        src="@/static/image/index/gonggao1.png"
        style="width: 58rpx; height: 28rpx; margin-left: 24rpx"
      />
      <text
        style="
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 24rpx;
          font-size: 13px;
          color: #6a6a6aff;
        "
        >这里是公告奥大赛哦对交货地啊uhi爱上耨达uayh看讲课很生动</text
      >
    </view> -->
		<view class="menu">
			<view class="menu-content" @click="supply('supplyProject')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/gongying.png"></image>
				<view class="menu-text">供应项目</view>
			</view>
			<view class="menu-content" @click="supply('demandProject')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/xuqiu.png"></image>
				<view class="menu-text">需求项目</view>
			</view>
			<view class="menu-content" @click="supply('electBidding')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/dianzi.png"></image>
				<view class="menu-text">电子竞价</view>
			</view>
			<view class="menu-content" @click="supply('publicAnnouncement')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/gongshi.png"></image>
				<view class="menu-text">公示公告</view>
			</view>
			<view class="menu-content" @click="supply('newsCenter')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/xinwen.png"></image>
				<view class="menu-text">新闻中心</view>
			</view>
			<view class="menu-content" @click="supply('notice')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/tongzhi.png"></image>
				<view class="menu-text">通知公告</view>
			</view>
			<view class="menu-content" @click="supply('informationList')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/zhengce.png"></image>
				<view class="menu-text">政策法规</view>
			</view>
			<view class="menu-content" @click="supply('transactionRules')">
				<image style="width: 67px; height: 67px" src="@/static/image/index/jiaoyi.png"></image>
				<view class="menu-text">交易规则</view>
			</view>
		</view>
		<view class="project">
			<view class="project-top">
				<view class="p-top-left">
					<view class="blue"></view>
					<view class="p-l-text">供应项目</view>
				</view>
				<view class="p-top-right" @click="supply('supplyProject')">
					<view class="p-more">更多</view>
				</view>
			</view>
			<view class="project-list">
				<view class="project-info" v-for="(item, index) in supplyList" :key="index"
					@click="supply('supplyDetails', item)">
					<view class="info-left">
						<image :src="
                item.imageUrl
                  ? baseUrl + item.imageUrl
                  : '../../static/image/1.jpg'
              " />
					</view>
					<view class="info-right">
						<text style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                font-weight: 600;
              ">[{{ item.statusName }}]{{ item.projectName }}</text>
						<text class="project-detail">转出方式：{{
                item.transferMethodName ? item.transferMethodName : "暂无"
              }}</text>
						<text class="project-detail">项目编号：{{ item.xmbh ? item.xmbh : "暂无" }}</text>
						<text class="project-detail">坐落位置：{{ item.location ? item.location : "暂无" }}</text>
						<text class="project-detail">发布时间：{{
                item.publishTime ? item.publishTime : "暂无"
              }}</text>
						<text style="font-size: 14px; color: #df5500ff; font-weight: 600">{{
              item.listingPrice
                ? "¥" + item.listingPrice + item.unitName
                : "面议"
            }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="project">
			<view class="project-top">
				<view class="p-top-left">
					<view class="blue"></view>
					<view class="p-l-text">需求项目</view>
				</view>
				<view class="p-top-right" @click="supply('demandProject')">
					<view class="p-more">更多</view>
				</view>
			</view>
			<view class="project-list">
				<view class="project-info" v-for="(item, index) in demandList" :key="index"
					@click="supply('demandDetails', item)">
					<view class="info-left">
						<image :src="
                item.imageUrl
                  ? baseUrl + item.imageUrl
                  : '../../static/image/1.jpg'
              " />
					</view>
					<view class="info-right">
						<text style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                font-weight: 600;
              ">[{{ item.projectType }}]{{ item.projectName }}</text>
						<text class="project-detail">项目编号：{{ item.projectNo }}</text>
						<text class="project-detail">发布时间：{{
                item.publishTime ? item.publishTime : "暂无"
              }}</text>
						<text class="project-detail">地块面积：{{ item.landArea + item.landAreaUnit }}</text>
						<text class="project-detail">位置：{{ item.area ? item.area : "暂无" }}</text>
						<text
							style="font-size: 14px; color: #df5500ff; font-weight: 600">¥{{ item.price + item.priceUnit }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">—— 到底了 ——</view>
		<uni-popup ref="checkCity">
			<view style="
          width: 100%;
          background-color: white;
          display: flex;
          flex-direction: column;
        " :style="{ height: isMap ? '800rpx' : '655rpx' }">
				<view v-if="isMap" :style="{ height: 44 + statusBarHeight + 'px' }"></view>
				<scroll-view style="border: 1px solid black; flex: 1" scroll-x>
					<view style="height: 100%; display: flex">
						<scroll-view scroll-y style="
                height: 550rpx;
                width: 140px;
                border-right: 1px solid black;
              " v-for="(item, index) in citys" :key="index">
							<view v-for="(citem, cindex) in item" :key="cindex" style="
                  height: 80rpx;
                  width: 140px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                " @click="checkCity(index, citem)" :style="{
                  color: checkCitys[index]
                    ? citem.id == checkCitys[index].id
                      ? '#096ce7'
                      : 'black'
                    : '',
                }">{{ citem.name }}</view>
						</scroll-view>
					</view>
				</scroll-view>
				<view style="
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
          ">
					<view style="
              height: 70rpx;
              width: 35%;
              border: 1px solid black;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 40rpx;
            " @click="cityReaset">重置</view>
					<view style="
              height: 70rpx;
              width: 35%;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 40rpx;
              background-color: #096ce7;
              color: white;
            " @click="cityOk">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		api
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				title: "Hello",
				statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
				// 需求项目列表
				demandList: [],
				supplyList: [],
				citys: [],
				checkCitys: [],
				baseUrl: this.$baseUrl,
				nowCity: {},
				isMap: false,
			};
		},
		onShow() {
			let port = uni.getSystemInfoSync().platform;
			if (port == "android" || port == "ios") {
				this.isMap = false;
			} else {
				this.isMap = true;
			}
		},
		onLoad() {
			let nowCity = uni.getStorageSync("nowCity");
			if (nowCity) {
				console.log("不需要初始化当前地址");
				this.nowCity = uni.getStorageSync("nowCity");
			} else {
				console.log("需要初始化当前地址");
				uni.setStorageSync("nowCity", {
					id: "",
					level: ""
				});
				this.nowCity = {
					id: "",
					level: ""
				};
			}
			this.getDemandProjectPage();
			this.getSupplyProjectPage();
			let data = uni.getStorageSync("citys");

			this.checkCitys = data || [];
		},
		methods: {
			showCheckCity() {
				this.getAreaList(0);
				this.$refs.checkCity.open("top");
			},
			async getAreaList(e) {
				let data = uni.getStorageSync("citys");
				console.log("存储信息", data);
				if (data.length != 0) {
					console.log(123);
					this.checkCitys = data;
					let res = await api.getAreaList({
						pid: 0
					});
					console.log("区县信息", res.data);
					this.$set(this.citys, 0, res.data);
					if (data.length == 1) {
						let ress = await api.getAreaList({
							pid: data[0].id
						});
						console.log("镇信息", ress.data);
						this.$set(this.citys, 1, ress.data);
					} else if (data.length != 0) {
						let ress = await api.getAreaList({
							pid: data[0].id
						});
						console.log("镇信息", ress.data);
						this.$set(this.citys, 1, ress.data);
						let resss = await api.getAreaList({
							pid: data[1].id
						});
						console.log("村信息", resss.data);
						this.$set(this.citys, 2, resss.data);
					}
				} else {
					let res = await api.getAreaList({
						pid: 0
					});
					console.log("区县信息", res.data);
					this.$set(this.citys, 0, res.data);
					this.citys.splice(1, 2);
				}
			},
			async getDemandProjectPage() {
				let res = await api.getDemandProjectPage({
					pageNum: 0,
					pageSize: 2,
					areaId: this.nowCity.id,
					level: this.nowCity.level,
				});
				console.log("需求项目列表", res.data.rows);
				this.demandList = res.data.rows;
			},
			async getSupplyProjectPage() {
				let res = await api.getSupplyProjectPage({
					pageNum: 0,
					pageSize: 2,
					areaId: this.nowCity.id,
					level: this.nowCity.level,
				});
				console.log("供应项目列表", res.data.rows);
				this.supplyList = res.data.rows;
			},
			supply(e, a) {
				uni.navigateTo({
					url: "/pages/" + e + "/" + e + "?data=" + JSON.stringify(a),
				});
			},
			async checkCity(e, a) {
				let res = await api.getAreaList({
					pid: a.id
				});
				if (e == 0) {
					console.log(1);
					this.citys[1] = res.data;
					this.citys[2] = [];

					this.checkCitys[0] = a;
					this.checkCitys.splice(1, this.checkCitys.length - 1);
					this.$forceUpdate();
				} else if (e == 1) {
					console.log(12);
					this.citys[2] = res.data;
					this.checkCitys[1] = a;
					this.checkCitys.splice(1, this.checkCitys.length - 2);
					this.$forceUpdate();
				} else {
					console.log(13);
					this.checkCitys[2] = a;
					this.$forceUpdate();
				}
				console.log("数据", this.checkCitys);
			},
			cityOk() {
				this.$refs.checkCity.close();
				uni.setStorageSync("citys", this.checkCitys);
				uni.setStorageSync(
					"nowCity",
					this.checkCitys[this.checkCitys.length - 1]
				);
				this.nowCity = this.checkCitys[this.checkCitys.length - 1];
				this.getSupplyProjectPage();
				this.getDemandProjectPage();
			},
			cityReaset() {
				this.checkCitys = [];
				this.nowCity = {};
				uni.setStorageSync("citys", []);
				uni.setStorageSync("nowCity", {
					id: "",
					level: ""
				});
				this.$refs.checkCity.close();
				this.$forceUpdate();
				this.getSupplyProjectPage();
				this.getDemandProjectPage();
			},
		},
	};
</script>

<style lang="less" scoped>
	page {
		background-color: #f8f8f8;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;

		.top-bar {
			height: 80rpx;
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.bar-left {
				width: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.bar-content {
				background-color: #ececec;
				border-radius: 40rpx;
				height: 60rpx;
				width: 550rpx;
				display: flex;
				align-items: center;
			}

			.bar-right {
				display: flex;
				width: 70rpx;
				align-items: center;
				justify-content: center;
			}
		}

		.top-banner {
			width: 92%;
			height: 340rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
		}

		.affiche {
			width: 92%;
			background-color: white;
			height: 80rpx;
			margin-top: 20rpx;
			box-shadow: rgba(128, 128, 128, 0.404) 0px 0px 5px;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
		}

		.menu {
			width: 92%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.menu-content {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 180rpx;

				.menu-text {
					font-size: 13px;
					font-weight: 600;
					color: #222222ff;
				}
			}
		}

		.project {
			margin-top: 20rpx;
			width: 100%;

			.project-top {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.p-top-left {
					display: flex;
					align-items: center;

					.blue {
						width: 10rpx;
						height: 50rpx;
						background-color: #096ce7;
					}

					.p-l-text {
						margin-left: 20rpx;
						font-weight: 600;
						font-size: 15px;
					}
				}

				.p-top-right {
					width: 80rpx;
					font-size: 13px;
					color: #a2a2a2ff;
				}
			}

			.project-list {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.project-info {
					width: 92%;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					display: flex;

					.info-left {
						image {
							width: 220rpx;
							height: 300rpx;
							border-radius: 10rpx;
						}
					}

					.info-right {
						width: 470rpx;
						margin-left: 14rpx;
						display: flex;
						justify-content: space-around;
						flex-direction: column;

						.project-detail {
							font-size: 13px;
							color: #828282ff;
						}
					}
				}
			}
		}

		.footer {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			color: #949494;
		}

		.navBarBox {
			width: 100%;
			z-index: 2;
			background-color: white;

			.navBar {
				height: 88rpx;
				display: flex;
				justify-content: center;
				line-height: 88rpx;
				font-size: 15px;
			}
		}
	}
</style>